<template>
  <div>
    <div class="search">
        <div class="input">
            <label>职位名称：</label><el-input v-model="pageData.postName" placeholder="请输入ID"></el-input>
            <label>所属机构：</label><el-input v-model="pageData.orgName" placeholder="请输入编码"></el-input>
            <label>ID：</label><el-input v-model="pageData.postId" placeholder="请输入名称"></el-input>
            <el-button type="primary" class="se" @click="search">搜索</el-button>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="dialogs">新增职位</el-button>
    </div>
    <div class="table">
        <tableVue :list="list" :state="false"  @changeData="selectionVal">
            <slot>
              <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="compile(scope.row)">编辑
                    </el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      class="del"
                      @click="handleEdit(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
            </slot>
        </tableVue>
    </div>
    <dialogVue title="新增职位" :dialog="dialog" @close="changeData" :state="false">
        <slot>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="职位名称" prop="postName">
              <el-input v-model="ruleForm.postName" placeholder="请输入职位名称"></el-input>
            </el-form-item>
            <el-form-item label="所属机构" prop="name">
              <el-select v-model="orgId" placeholder="请选择类型" class="set">
                 <el-option label="请选择" value="0"></el-option>
                 <el-option v-for="(val,key) in optionList" :key="key" :label="val.orgDescription" :value="val.orgId"></el-option>
             </el-select>
            </el-form-item>
            <el-form-item class="confirm">
                <el-button type="primary" v-if="btnst == '1'" @click="addConfirm('ruleForm')">确定</el-button>
                <el-button type="primary" v-if="btnst == '2'" @click="compileConfirm('ruleForm')">更新</el-button>
            </el-form-item>
          </el-form>
        </slot>
    </dialogVue>
  </div>
</template>
<script>
    import Data from './JobData.js'
    import dialogVue from '@/components/dialog.vue'
    import tableVue from '@/components/alltable.vue'
    import checkPermission from "@/utils/permission"; // 权限判断函数
    import {
      addJob,
      allOrg,
      jobList,
      jobUp,
      delJob
    } from "@/api/job/job";
    export default {
      components : {
        tableVue,
        dialogVue
      },
      data () {
        return  JSON.parse(JSON.stringify(Data))
      },
      mounted () {
        this.getJobList()
      },
      methods : {
        getJobList (data) {
          jobList(data).then(res=>{
            if (res.data.code == 'OK') {
              this.list.tbody = res.data.data.records.map(item=>{
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                return item;
              });
            }
          })
        },
        dialogs () {
          if (checkPermission('post_manager_add') == true) {
              this.btnst = '1'
              this.dialog = true;
              this.ruleForm.postName = '';
              this.orgId = "";
              allOrg().then(res=>{
                 if (res.data.code == 'OK'){
                   this.optionList = res.data.data;
                 }
              })
          } else {
              this.$message.error("您没有权限添加");
          }

        },
        changeData (val) {
            this.dialog = val
        },
        selectionVal (val) {

        },
        handleEdit(item){
          this.delMessage(()=>{
            delJob(item.postId).then(res=>{
              if(res.data.code == 'OK') {
                this.$message.success("删除成功");
                this.getJobList()
              } else {
                this.$message.error(res.data.message);
              }
            })
          })
        },
        compile (item) {//编辑职位
          if (checkPermission('post_manager_update') == true) {
            this.btnst = '2';
            this.dialog = true;
            this.ruleForm.postName = item.postName;
            this.orgId = item.orgId;
            this.postId = item.postId;
            allOrg().then(res=>{
               if (res.data.code == 'OK'){
                 this.optionList = res.data.data;
               }
            })
          } else {
            this.$message.error("您没有权限编辑");
          }
        } ,
        addConfirm () {//新增职位确定
          this.$refs.ruleForm.validate(valid=>{
            if (valid) {
              let data = {
                orgId : this.orgId,
                postName : this.ruleForm.postName
              }
              addJob(data).then(res=>{
                if (res.data.code == 'OK') {
                  this.$message.success("新建职位成功");
                  this.dialog = false;
                  this.getJobList()
                } else {
                  this.$message.error(res.data.code);
                }
              })
            }
          })
        },
        compileConfirm () {//编辑职位确定
          this.$refs.ruleForm.validate(valid=>{
            if (valid) {
              let data = {
                orgId : this.orgId,
                postName : this.ruleForm.postName,
                postId : this.postId
              }
              jobUp(data).then(res=>{
                if (res.data.code == 'OK') {
                  this.$message.success("编辑职位成功");
                  this.dialog = false;
                  this.getJobList()
                } else {
                  this.$message.error(res.data.code);
                }
              })
            }
          })
        },
        search () {
          let data = {
            orgName : this.pageData.orgName,
            postName : this.pageData.postName,
            postId : this.pageData.postId
          }
          jobList(data).then(res=>{
            if (res.data.code == 'OK') {
                this.$message.success("搜索成功");
                this.list.tbody = res.data.data.records.map(item=>{
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                return item;
              });
            }
          })
        }
      }
    }
</script>
<style scoped>
    .search {
      width: 100%;
      background-color: #fff;
      padding:20px;
      box-sizing: border-box;
      margin-top: 10px;
      height: 80px;
    }
    .input {
      /* width: 300px; */
      display: flex;
    }
    label {
      line-height: 40px;
      color: #333;
      margin: 0 10px;
    }
    .el-input {
      width:200px;
      height:20px;
    }
    .add {
      margin-top: 10px;
      padding-left: 14px;
    }
    .se {
      margin-left: 10px;
    }
  .content label {
    display:inline-block;
    width:100px;
    text-align: justify;
    text-align-last: justify;
    line-height: 0;
    font-size: 18px;
  }
  .content input {
    height:24px;
  }
  .content p {
    margin: 10px 0;
  }
  .confirm {
    position: absolute;
    bottom: -1px;
    right: 100px;
  }
</style>
